<!-- Menu -->
<script type="text/javascript">
    // --------------------
    function menuSelect(id){
    // --------------------
        if(id == 'threshold'){
            $("p#threshold img").attr("src", "/static/images/threshold_selected.png");
            $("p#thin img").attr("src", "/static/images/thin.png");
        } else if(id == 'thin'){
            $("p#threshold img").attr("src", "/static/images/threshold.png");
            $("p#thin img").attr("src", "/static/images/thin_selected.png");
        }
    }

    function menuThreshold(){
        menuSelect('threshold');
        $('#app_tabs').cycle(thresholdingSlideIndex);
    }
    function menuThin(){
        menuSelect('thin');
        $('#app_tabs').cycle(thinningSlideIndex);
    }


</script>
<div id="menu_sidebar">
    <div id="menu_sidebar_images" style="padding-top: 15%; padding-bottom: 15%">
        <p id="upload">
            <a href='/'>
                <img src={% ifequal current 'upload' %}"/static/images/upload_selected.png"{% else %}"/static/images/upload.png"{% endifequal %} style="width:100%">
            </a>
        </p>
        <p id="threshold">
            <img src={% ifequal current 'threshold' %}"/static/images/threshold_selected.png"{% else %}"/static/images/threshold.png"{% endifequal %} style="width:100%">
        </p>		
        <p id="thin">
            <img src={% ifequal current 'thin' %}"/static/images/thin_selected.png"{% else %}"/static/images/thin.png"{% endifequal %} style="width:100%">
        </p>		
    </div>
</div>
